<template>
    <div class="guide_container">
        <div class="guide_top">
            <div class="guide_left">因交流而生</div>
            <div class="guide_line"></div>
            <div class="guide_right">逗趣</div>
        </div>
        <div class="guide_people">
            <img src="../assets/images/guide.png" alt="">
        </div>
       
        <div class="guide_logo">
            <img src="../assets/images/guide_name.png" alt="">
        </div>
    </div>
</template>
<script>
    export default {
        name:'guide',
        data(){
            return{

            }
        }
    }
</script>
<style lang="less" scoped>
@rem:35rem;  
.guide_container{
    position:relative;
    width:100%;
    height:600/@rem;
    .guide_top{

        color:#2676bd;
        font-family:'华文楷体';
        position:absolute;
        left:50%;
        top:30/@rem;
        transform:translateX(-50%);
        .guide_left{
            width:20/@rem;
            font-size:16/@rem;
            float:left;
            margin-top:60/@rem;
        }
        .guide_line{
            width:2/@rem;
            height:140/@rem;
            background:#ccc;
            float:left;
            margin:5/@rem;
        }
        .guide_right{
            width:20/@rem;
            font-size:20/@rem;
            font-weight:bold;
            float:left;
        }
    }
    .guide_people{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top:40%;
        img{
            width:200/@rem;
        }
    }
    .guide_logo{
        position:absolute;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        img{
            width:150/@rem;
        }
    }
} 

</style>